.m-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background-color: white;
    z-index: 1;
}
.m-header .header__top {
    height: 44px;
    display: flex;
    overflow: hidden;
    align-items: center;
    padding: 0 10px;
}
.m-header .header__logo > img {
    width: 90px;
}
.m-header .header__search {
    height: 25px;
    flex: 1;
    margin-left: 20px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    border-radius: 3px;
}
.m-header .header__input {
    height: 100%;
    padding: 0 10px;
    color: #333;
    font-size: 12px;
    outline: none;
    border: 0;
    background: transparent;
    flex: 1;
}
.m-header .header__submit {
    display: block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAiCAYAAAA+stv/AAAABHNCSVQICAgIfAhkiAAAAoJJREFUWIXtl9112kAQhe/syXvUQegAOrBcQVipAMsV2K7A6gDSAS4AhlRgqCAuAXdgN7A3D57lbDjoD7Cfcl+Q0Mzup93ZmZFggFar1VV6XxTFdoj/MUnbQ1UdAfhJsgIwOWZDci0i66Ioni4GoKoZgDuS9YCxdiLy4L1fnwWgqhOSCmCU/P2b5No5twOwA5AByEIIExGpAIyjodndeu/f+gB8OzL5s00AAE8iUnvvdw3+GwBzVc1JzgGMRWRKMgNw3QdgvwKqOiL5B0BG8h3AfVmWiz6DRK1WqwWAGwAguSjL8rbLx8ULW/YMAJxz+dDJAaAoigrAEwCISLVcLqteAGY4MZAH7/3L0MkPILYGMbOAbgcQkUe735ZlOT918igLTOAjUFtXwalqDot4ETl7cgCwoI1bcdMKEELIAYDk+9Az3CYRiWNNLKEdBxCR3BxO3vcGbZLrZoB4QXLTZHSK0kQUQjiaxiPAVdPDCygWq8aT4BKjz9C4y2C/BSLSuExnKCa2xvhyAOLDi26Fqk6T22YAEYkpNztwOkskp/b72lLM4Lz3LyRfzfjuEpPbuY8JqLWmxBiIjUfep4B0KYQwAz6Sm3OuNbs6ALDKlxaQkwNyuVzWIhK3su5qTNJTcG99QEby2WrEIKnq49DC9k9LpqqTEMJGRL4bVA3gV9dbWCc1A5BCv4nIdVdpP9oTphAA3mLnKyKvcUBr0Uckp8mSAx/9Y27+nRCNXbH1eK2lNJVtX12W5fzgJVohOr8LSNb2Rj8azLbW/y0OfHtBtAIcwuCgrHrvWytoH4jeAKeqC+LTAbogXIfvReS9f3HO5Ume2X/yfQlAAlEZRGNx+q8v11++/V+1bb4gowAAAABJRU5ErkJggg==) no-repeat center center;
    background-size: 16px 16px;
    border: none;
    width: 25px;
    height: 25px;
}

.m-header .header__cat {
    border-bottom: 1px solid #eee;
    box-shadow: 0 9px 9px 0 rgba(0,0,0,.11);
}
.m-header .cat__wrap {
    width: calc(100vw - 40px);
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    position: relative;
}
.m-header .cat__wrap::-webkit-scrollbar {
    display: none;
}
.m-header .cat__switch {
    position: absolute;
    top: 44px;
    right: 0;
    width: 40px;
    height: 40px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAZVJREFUWAntV7FKA0EQnT3S2OWiSQq19jsUEcT/iBCEJL2ggrU5jSjkA/QP1NYvsLDSOk1yIYlWFt6N885sOAMeezFcLHbh2NmZ2XlvZ/d2GaIFNwV8t9nbla7NzGtZ8FFKdQSnMmyU7nNjwDY5tD+qle+yIOA2/T0ibgvWeoSXP+tyFsBxDI3pxJWLkC0BmwGbAZsBfRUn3kF5r3dIzJs55VT79eJLkvOK5298cnhJSj2O6qXTJF/YzLaA6Y2YtoIwfHK93oE8WtEjFg8OHWzwEd9tsb3H7b/JRgRGjVLLUXQiD8YSh9wqeP7D8nV/VQeFDB1s8IGvrP5C25N6oy1AgEGjfFxodilkOpLV7gQf4bN77ldhE/lKtsiFDHD4QjZpRhnQgRAYANFYADkIb/HNCo44qQhgwg8SUIxb2pVP5mkhTT9NYlZwYBqfgWmCICFn4BX6Qa14M203Hc9MAADDPwBrgqnPgJ44r94SsBmwGYgygFrtu1ya18+VHAdY4/pwchNWUKtJuZRJcSpYHaEomP+gfQFNL5Zev3GozgAAAABJRU5ErkJggg==") no-repeat center center;
    background-size: 20px 20px;
    z-index: 3;
}
.m-header .cat__list {
    display: flex;
    align-items: center;
    height: 40px;
}
.m-header .cat__item {
    display: flex;
    align-items: center;
    color: black;
    height: 100%;
    box-sizing: border-box;
    border-bottom: 2px solid transparent;
    margin-left: 20px;
}
.m-header .cat__item--active {
    color: rgb(53, 118, 199);
    border-bottom: 2px solid #108ee9;
}

.m-header .header__cat2 {
    position: absolute;
    top: 44px;
    width: 100vw;
    margin: 0 auto;
    background: #fff;
    z-index: 2;
    padding-bottom: 12px;
    box-shadow: 0px 9px 9px 0 rgba(0,0,0,.11);
}
.m-header .cat2__list {
    display: flex;
    padding: 0 10px 0 10px;
    flex-wrap: wrap;
}
.m-header .cat2__item {
    width: 70px;
    height: 27px;
    line-height: 27px;
    overflow: hidden;
    text-align: center;
    margin: 10px 0 0 10px;
    border-radius: 3px;
    font-size: 14px;
}
.m-header .cat2__item--active {
    color: rgb(255, 255, 255);
    background: rgb(16, 142, 233);
}
.m-header-margin {
    margin-top: 85px;
}